<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - JavaScript Game Engine, HTML5 Game Engine</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			




<div class="row splash">
	
	<div id = "splash-right">
<pre><code class="language-javascript"><span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    Crafty.init();
    <span class="hljs-comment">// A blue block, controlled by arrow keys</span>
    <span class="hljs-keyword">var</span> player = Crafty.e(<span class="hljs-string">"2D, Canvas, Color, Fourway"</span>)
        .attr({<span class="hljs-attr">x</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">100</span>, <span class="hljs-attr">w</span>:<span class="hljs-number">50</span>, <span class="hljs-attr">h</span>:<span class="hljs-number">50</span>})
        .color(<span class="hljs-string">"blue"</span>)
        .fourway(<span class="hljs-number">3</span>);
};</code></pre>
	</div>
	<div id="splash-left">
		<div id="splash-text">
			<div class="row" id="blurb">
				<!-- <div class="blurb-title">CraftyJS</div> -->
				<div class="col-md-12" class="title-text">A flexible framework <br/> for Javascript games</div>
				
			</div>
			

		</div>
		<div id="splash-download">
			<div class="download-link">
				<a href="#install" class="download" id="download">
					<div>Download Crafty</div>
					<div class="version">v. 0.8.0</div>
				</a>
				<div class="install-options">
					<a href="#direct-install">minified</a> &#8226; <a href="#bower-install">bower</a> &#8226; <a href="#npm-install">npm</a> &#8226; <a href="#nightly-install">nightly</a>

				</div>
			</div>
		</div>
	</div>
	
</div>



<div class="announcement">
	<div style="float:right; margin-right: 20px;">
		Show Crafty.js some <span id="love">love</span>: 
		<iframe src="http://ghbtns.com/github-btn.html?user=craftyjs&repo=crafty&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20" style="vertical-align: text-top;"></iframe>
	</div>
	<div><span class="date">12 February: </span><a href="https://github.com/craftyjs/Crafty/releases/tag/0.8.0">version 0.8.0</a> is out! </div>
</div>



<div id="grid">

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>Open Source</h2>
	
		<p>Crafty is actively developed on <a href="https://github.com/craftyjs/Crafty">Github</a>, and we welcome contributions! See <a href="https://github.com/craftyjs/Crafty/releases/tag/0.8.0">release notes.</a></p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box browser">
		<h2>Cross Browser compatible</h2>
		<p>Your games will work on all modern browsers, including IE9.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box canvas">
		<h2>Canvas or DOM</h2>
		<p>Choose the technology to render your entities, it will look exactly the same.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Small file size</h2>
		<p>Small enough that you don't need to wory about it delaying your game.</p>
	</div></div></div>

	<div class="outer-box"><div class="box "><div class="inner-box">
		<h2>Entity Component System</h2>
		<p>A better way to approach game development without long chains of inheritance.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box sprite">
		<h2>Sprite Map support</h2>
		<p>Splice and dice a sprite map to easily draw game entities.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box collide">
		<h2>Collision Detection</h2>
		<p>Advanced SAT collision detection with more information than just true or false.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Fire &amp; Forget Events</h2>
		<p>Event system for custom events that can be triggered whenever, on whatever, and bound just as easily.</p>
	</div></div></div>

	<div class="outer-box"><div class="box"><div class="inner-box">
		<h2>Lots 'o Goodies</h2>
		<p>Heaps of native components for sound, animation, effects and input to make your game pop!</p>
	</div></div>
	<div class="clearer"></div></div>
</div>


<div id="install-div">
	<h2 id="install">Installation</h2>
	<div id="direct-install">
		<h3>Direct download</h3>

		<p>You can download a regular or minified version of Crafty:</p>
		<a class="bullet-point" href="https://github.com/craftyjs/Crafty/releases/download/0.8.0/crafty.js">crafty.js</a>
		<a class="bullet-point"href="https://github.com/craftyjs/Crafty/releases/download/0.8.0/crafty-min.js">crafty-min.js</a>
	</div>
	<div id="npm-install">
		<h3>npm module</h3>
		<p>Crafty is available as an <a href="https://www.npmjs.org">npm</a> module.</p>
		<code class="grey">$ npm install craftyjs</code>
		<p>You can see an example on how to get started:</p>
		<a class="bullet-point" href="https://github.com/kevinsimper/craftyjs-npm-example">npm example</a>
	</div>
	<div id="bower-install">
		<h3>Bower installation</h3>
		<p>With <a href="http://bower.io/">bower</a> installed, the command</p>
		<code class="grey">$ bower install crafty</code>
		<p>will fetch the lastest version of crafty and install it in your project's bower directory.</p>
	</div>
	<div id="nightly-install">
		<h3>Bleeding edge</h3>

		<p>Fresh builds are uploaded by Travis after every successful merge:</p>
		<a class="bullet-point" href="https://github.com/craftyjs/Crafty-Distro/tree/nightlies">Nightly distribution</a>
	</div>
</div>


<div id="demos-div">
	<h2 id="demos-title">Demos</h2>
	<ul id="demos" class="gridlist">
		
		<li>
			<a href="http://hugeen.github.com/Defend-The-Den/">
				<img src="demos/thumbs/defendtheden.png"/>
				<span>Defend the Den</span>
			</a>
		</li>
		<li>
			<a href="http://bradengroom.github.io/CS499-PacMan/">
				<img src="demos/thumbs/pacman.png" />
				<span>Pacman</span>
			</a>
		</li>
		<li>
			<a href="http://blackscorp.github.com/cron/">
				<img src="demos/thumbs/cron.png"/>
				<span>Cron</span></a>
		</li>
		<li>
			<a href="http://morrisgames.info/">
				<img src="demos/thumbs/code-commander.png"/>
				<span>Code Commander</span></a>
		</li>
		<li>
			<a href="http://planktongames.com/wordy/">
				<img src="demos/thumbs/wordy.png"/>
				<span>Wordy</span></a>
		</li>
		<li>
			<a href="http://lapiroff.name/orderlies/Q/">
				<img src="demos/thumbs/Q.png"/>
				<span>Q</span></a>
		</li>
		<li>
			<a href="demos/fruitassassin">
				<img src="demos/thumbs/fruit.png"/>
				<span>Fruit Assassin</span></a>
		</li>
		<li>
			<a href="demos/connect4">
				<img src="demos/thumbs/connect4.png"/>
				<span>Connect 4</span></a>
		</li>
		<li>
			<a href="demos/asteroids">
				<img src="demos/thumbs/asteroids.png"/>
				<span>Asteroids</span></a>
		</li>
		<li>
			<a href="demos/tutorial">
				<img src="demos/thumbs/rpg.png"/>
				<span>RPG</span></a>
		</li>
		<li>
			<a href="demos/isometric">
				<img src="demos/thumbs/isometric.png"/>
				<span>Isometric</span></a>
		</li>
		<li>
			<a href="http://projects.edillingham.com/senet/">
				<img src="demos/thumbs/senet.png" />
				<span>Senet</span></a>
		</li>
	</ul>
	<div class="clearer" />
</div>
<div class="clearer"></div>
<div id="contributors" class="half">
	<h2>Development team
	</h2>
	<p>Active team members:
		<ul>
			<li><a href="https://github.com/starwed">starwed</a> (maintainer)</li>
			<li><a href="https://github.com/kevinsimper">Kevin Simper</a></li>
			<li><a href="https://github.com/mucaho">mucaho</a></li>
		</ul>
	</p>
	<p>Original author: Louis Stowasser</p>
	
</div>

<div class="clearer"></div>
</div>

			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
